<template>
  <div class="changeadd">
    <div class="headerbox">
      <div class="header-walp">
        <div class="header">订单详情</div>
        <van-icon @click="ret" name="arrow-left" />
      </div>
    </div>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @click-item="changeDefault"
    />
  </div>
</template>
<script>
import { Toast } from "vant";
import addressModel from "../model/addressModel";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [],
    };
  },
  methods: {
    changeDefault() {
      //   console.log(item);
    },
    ret() {
      this.$router.go(-1);
    },
    onAdd() {
      Toast("新增地址");
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
    },
  },
  created() {
    this.$store.commit("changeNavFlag", false);
    addressModel.query().then((res) => {
      //   console.log(res.data);
      this.list = res.data;
      //   console.log(this.addresslist);
    });
  },
  beforDestroy() {
    this.$store.commit("changeNavFlag", true);
  },
};
</script>
<style lang="scss" scoped>
.headerbox {
  .van-icon-arrow-left {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 18px;
  }
  //   height: auto;
  z-index: 999;
  background-color: #eae9e5;
  overflow: hidden;
  height: 40px;
  width: 100%;
  .header-walp {
    position: fixed;
    background-color: #eae9e5;
    z-index: 999;
    width: 100%;
  }
  .header {
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    background-color: #eae9e5;
  }
  .iconfont {
    margin-top: 5px;
  }
}
</style>